<template>
  <div class="backtop-view-bo">
    <div class="backtop-view" @click="onModPages('1')">
      <i class="el-icon-circle-plus"></i>
    </div>
    <div class="backtop-view" v-show="sum>1" @click="onModPages('-1')">
      <i class="el-icon-remove"></i>
    </div>
    <div class="backtop-view" v-show="backTopShow" @click="scrollPageTo">
      <i class="el-icon-caret-top"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'backtopView',
  props: {
    sum: {
      type: Number,
      default: 1
    },
  },
  data () {
    return {
      backTopShow: false,
    }
  },
  created () {
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    scrollToTop () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      this.backTopShow = scrollTop > 200
    },
    scrollPageTo () {
      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
    },
    onModPages (param) {
      this.$emit('onModPages', param);
    }
  },
}
</script>
<style lang="scss" scoped>
  .backtop-view-bo {
      position: fixed;
      right: 50px;
      bottom: 50px;
  }
  .backtop-view {
      margin-bottom: 10px;
      background-color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
      cursor: pointer;
      z-index: 5;
  }
</style>
